<template>
  <div id="Prop" style="width: 100%;height:200px;"></div>
</template>

<script>
  import echarts from 'echarts'

  export default {
    name: "Prop",
    data() {
      return {
        prop: [],
        id: [],
        screenWidth: document.body.clientWidth,
      }
    },
    methods: {
      getData() {
        let _this = this;
        let token = _this.getCookie("token");
        _this.$http.post(_this.apiUrl("user/exam/getProp"), {}, {
          headers: {
            'token': token,
            'sid': _this.$route.query.sid
          }
        })
          .then((res) => {
            // console.log(res.data.data);
            let temp = res.data.data;
            for (let i = 0; i < temp.length; i++) {
              if(temp[i].correct_count === null || temp[i].total_count === null){
                _this.prop.push(0);
                _this.id.push(temp[i].id);
                continue;
              }
              _this.prop.push(temp[i].correct_count / temp[i].total_count);
              _this.id.push(temp[i].id);
            }
            echarts.init(document.getElementById('Prop')).setOption(_this.newEchartsProp());
          });
      },
      newEchartsProp() {
        let _this = this;
        // 指定图表的配置项和数据
        return {
          title: {
            text: ''
          },
          tooltip: {},
          legend: {
            data:['销量']
          },
          xAxis: {
            data: _this.id
          },
          yAxis: {},
          series: [{
            name: '正答率',
            type: 'bar',
            data: _this.prop
          }]
        };
      },
      monitorWidth() {
        const that = this;
        window.onresize = () => {
          return (() => {
            window.screenWidth = document.body.clientWidth;
            that.screenWidth = window.screenWidth;
          })()
        }
      },
    },
    mounted() {
      let _this = this;
      _this.getData();
      _this.monitorWidth();
    },
    updated(){
    },
    watch: {
      screenWidth() {
        let _this = this;
      }
    }
  }
</script>

<style>
  #Prop{
    margin: auto;
    width: 250px!important;
  }

  #Prop div{
    width: 250px!important;
  }

  #Prop canvas{
  width: 250px!important;
}
</style>
